<template>
    <el-dialog v-model="DialogShow" width="30%" title="添加题库" center custom-class="custom_class ">
        <div class="main">
            <el-form :model="form" ref="ruleFormRef" label-width="auto" style="max-width: 600px" :rules="ruleForm">
                <el-form-item label="题库名称" prop="questionBankName">
                    <el-input v-model="form.questionBankName" />
                </el-form-item>
                <el-form-item label="图片" prop="imgUrl">
                    <UploadImg v-model:fileListProps="form.imgUrl" />
                </el-form-item>
            </el-form>
        </div>
        <template #footer>
            <span class="dialog-footer">
                <el-button @click="DialogShow = false">取消</el-button>
                <el-button type="primary" @click="submitForm"> 确定 </el-button>
            </span>
        </template>
    </el-dialog>
</template>

<script setup>
import { reactive, ref, watch } from 'vue';

import UploadImg from '@/components/base/UploadImg.vue'
import useUserInfo from "store/useUserInfo.js";
import { ElMessage } from "element-plus";
import { addQuestionApi } from "@/api/index";

const useUserInfoStore = useUserInfo();
import { storeToRefs } from 'pinia'
const { userInfo } = storeToRefs(useUserInfoStore)
const props = defineProps(['show'])
const emit = defineEmits(['update:show', 'onSubmit'])

const DialogShow = ref(false)
watch(() => props.show, (newVal) => {
    console.log(newVal, 'newVal');
    if (!newVal) {
        form.questionBankName = "";
        form.imgUrl = []
    }
    DialogShow.value = newVal;
});
watch(() => DialogShow.value, (newVal) => {
    emit('update:show', newVal);
});

// 数据收集
const form = reactive({
    questionBankName: '',
    imgUrl: []
})
// 表单验证
const ruleForm = reactive({
    questionBankName: [
        { required: true, message: '请输入题库名称', trigger: 'blur' },
        { min: 5, max: 8, message: '名称在五到八个字', trigger: 'blur' },
    ],
    imgUrl: [
        {
            type: 'array',
            required: true,
            message: '题库封面必填',
            trigger: 'blur',
        },
    ],
})
const ruleFormRef = ref(null);
const submitForm = async () => {
    await ruleFormRef.value.validate(async (valid, fields) => {
        if (valid) {
            const params = {
                questionBankName: form.questionBankName,
                questionBankUrl: form.imgUrl[0],
                operatorName: userInfo.value.name,
                operatorId: userInfo.value.userId
            }
            const json = await addQuestionApi(params)
            if (json.code !== "10000") {
                ElMessage({
                    showClose: true,
                    message: json.message,
                    type: "error",
                });
                return;
            }
            ElMessage({
                showClose: true,
                message: `新增成功!`,
                type: "success",
            });
            emit('update:show', false);
            emit('onSubmit');
        } else {
            console.log('error submit!', fields)
        }
    })
}

</script>

<style lang="scss"></style>